<template>
  <div id="SalesStatistics">
    <div class="banner">
      <p>
        <span>首页</span>
        <span> / </span>
        <span>数据统计</span>
        <span> / </span>
        <span class="title">销售统计</span>
      </p><br>
      <p class="header">销售统计</p>
    </div>

    <div class="bx">
      <div class="saletop">
        <h3 >销售Top榜</h3>
        <div class="button">
          <span v-for="(item,index) in timedate" :key="index" @click="change(index)" :class="currentIndex === index ? 'active':''" >{{item}}</span>
        </div>
          <el-table :data="userlist.list" style="width: 100%" height="400"  :cell-style="{'text-align':'center'}">    
            <el-table-column prop="name" label="姓名" width="180" header-align="center"/>
            <el-table-column prop="address" label="所在地" width="180" header-align="center"/>
            <el-table-column prop="money" label="销售金额" header-align="center"/>
            <!--  -->
            <el-table-column align="right">
              <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" @change="dialogTableVisible = true,searchitem(search)" />

                <el-dialog v-model="dialogTableVisible" title="查询结果" append-to-body='true' align-center="true"> 
                  <el-table :data="gridData">
                    <el-table-column property="name" label="姓名"  />
                    <el-table-column property='phone' label="电话" />
                    <el-table-column property="address" label="地址" />
                    <el-table-column property="money" label="销售金额" />
                  </el-table>
                </el-dialog>

              </template>
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)" 
                  >Edit</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >Delete</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          
      </div>
    </div>
  </div>
</template>

<script setup>

import * as echarts from 'echarts';
import { reactive, ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";
import axios from "axios";
import { useRouter } from 'vue-router';


var timedate=ref(["本月","本季度","本年"])
var currentIndex=ref(0);
var search=ref('');
var userlist=ref({list:[]});
const router=useRouter();
var searchend=ref('')
const dialogTableVisible = ref(false)
var gridData = ref([{}]);

const handleEdit = (index, row) => {
  console.log(index, row);
  router.push({path:'edititem',query:row});
}


const handleDelete = (index, row) => {
  axios.post('/api/dellist/list',{id:row.order}).then((res)=>{
    userlist.value.list = res.data.list;
  })
}

const searchitem=(search)=>{
  gridData.value=[];
  if(gridData.value!==[]){
    axios.post('/api/search/list',{search}).then((res)=>{
      gridData.value.push(res.data);
      console.log(res.data);
    })
  }else{
    alert(null)
  }
  
}
onMounted(()=>{
  axios.get('/api/user/list').then((res)=>{
    userlist.value.list=res.data.list;
    // console.log(userlist.value.list);
  })
});

var change=(index)=>{
  currentIndex.value=index;

}
</script>

<style scoped>
h3{
  margin: 10px 20px;
}
.banner{
  height: 80px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
  position: absolute;
  top:61px;
  left: 15%;
  padding-top: 20px;
  /* z-index: 100; */
}
.banner p{
  font-size: 12px;
  color: #AAA;
}
.banner .title{
  color: #000;
}
.banner .header{
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

#SalesStatistics .bx{
  width: 800px;
  /* height: 500px; */
  margin: auto;
  margin-top: 120px;
  /* background: #fff; */
  overflow: hidden;
}
#SalesStatistics .bx .button{
  margin: 20px 0 0 20px;
  border-radius: 5px;
  border: 1px solid blue;
  width: 280px;

  display: flex;
  justify-content: space-between;
  text-align: center;

}
#SalesStatistics .bx .button span{
  font-size: 12px;
  display: inline-block;
  width: 100px;
  height: 25px;
  line-height:25px;
  color: blue;
  cursor: pointer;
  /* border: 1px solid blue; */
}
#SalesStatistics .bx .saletop{
  margin-bottom: 40px;
  background: white;
  height: 500px;
}
#SalesStatistics .bx .saletop .button span.active{
  background: blue;
  color: white;
}
#SalesStatistics .bx .hospitalmentIncome .button span.active{
  background: blue;
  color: white;
}
.el-dialog{
  background: #AAA;
}
</style>